<template>
	<div class="playlist-detail-page">
		<div class="playlist-header">
			<div class="playlist-cover">
				<img :src="playlistInfo.cover" :alt="playlistInfo.name" />
			</div>
			<div class="playlist-info">
				<div class="playlist-type">歌单</div>
				<h1 class="playlist-title">{{ playlistInfo.name }}</h1>
				<div class="creator-info">
					<div class="creator-avatar"></div>
					<span class="creator-name">{{ playlistInfo.creator }}</span>
					<span class="create-time">{{ playlistInfo.createTime }}</span>
				</div>
				<div class="playlist-actions">
					<el-button type="primary" :icon="VideoPlay">
						播放全部
					</el-button>
					<el-button :icon="FolderAdd">收藏</el-button>
					<el-button :icon="Share">分享</el-button>
				</div>
				<div class="playlist-tags">
					<el-tag v-for="tag in playlistInfo.tags" :key="tag" size="small">
						{{ tag }}
					</el-tag>
				</div>
				<div class="playlist-desc">{{ playlistInfo.description }}</div>
			</div>
		</div>

		<div class="playlist-songs">
			<div class="songs-header">
				<h2>歌曲列表</h2>
				<span class="song-count">共 {{ songs.length }} 首</span>
			</div>
			
			<el-table :data="songs" style="width: 100%" @row-dblclick="handlePlaySong">
				<el-table-column type="index" label="" width="50" />
				<el-table-column label="音乐标题" min-width="300">
					<template #default="{ row }">
						<div class="song-title-cell">
							<img :src="row.cover" class="song-cover-mini" />
							<div class="song-title-info">
								<div class="song-title-name">{{ row.name }}</div>
								<div class="song-title-tag" v-if="row.vip">
									<el-tag type="warning" size="small">VIP</el-tag>
								</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="artist" label="歌手" width="200" />
				<el-table-column prop="album" label="专辑" width="200" />
				<el-table-column label="时长" width="100">
					<template #default="{ row }">
						{{ formatDuration(row.duration) }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template #default="{ row }">
						<div class="song-operations">
							<el-icon class="op-icon" @click="handlePlaySong(row)"><VideoPlay /></el-icon>
							<el-icon class="op-icon"><Plus /></el-icon>
							<el-icon class="op-icon"><Download /></el-icon>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { VideoPlay, FolderAdd, Share, Plus, Download } from '@element-plus/icons-vue';

const route = useRoute();

const playlistInfo = ref({
	id: route.params.id,
	name: '华语流行精选',
	cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=200&h=200&fit=crop',
	creator: '小明',
	createTime: '2024-01-15',
	tags: ['华语', '流行', '热门'],
	description: '精选华语流行音乐，带你感受最动听的旋律。这里有最新的流行单曲，也有经典的老歌，总有一首能打动你的心。'
});

const songs = ref([
	{ id: 1, name: '示例歌曲1', artist: '艺术家A', album: '专辑A', duration: 245, cover: 'https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=50&h=50&fit=crop', vip: false },
	{ id: 2, name: '示例歌曲2', artist: '艺术家B', album: '专辑B', duration: 198, cover: 'https://images.unsplash.com/photo-1458560871784-56d23406c091?w=50&h=50&fit=crop', vip: true },
	{ id: 3, name: '示例歌曲3', artist: '艺术家C', album: '专辑C', duration: 212, cover: 'https://images.unsplash.com/photo-1446057032654-9d8885db76c6?w=50&h=50&fit=crop', vip: false },
	{ id: 4, name: '示例歌曲4', artist: '艺术家D', album: '专辑D', duration: 189, cover: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=50&h=50&fit=crop', vip: false },
	{ id: 5, name: '示例歌曲5', artist: '艺术家E', album: '专辑E', duration: 256, cover: 'https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=50&h=50&fit=crop', vip: true },
	{ id: 6, name: '示例歌曲6', artist: '艺术家F', album: '专辑F', duration: 223, cover: 'https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=50&h=50&fit=crop', vip: false },
	{ id: 7, name: '示例歌曲7', artist: '艺术家G', album: '专辑G', duration: 201, cover: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=50&h=50&fit=crop', vip: false },
	{ id: 8, name: '示例歌曲8', artist: '艺术家H', album: '专辑H', duration: 234, cover: 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=50&h=50&fit=crop', vip: true }
]);

const formatDuration = (seconds: number): string => {
	const mins = Math.floor(seconds / 60);
	const secs = Math.floor(seconds % 60);
	return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};

const handlePlaySong = (song: any) => {
	console.log('播放歌曲:', song);
};
</script>

<style scoped lang="scss">
.playlist-detail-page {
	padding: 30px;

	.playlist-header {
		display: flex;
		gap: 30px;
		margin-bottom: 40px;
		padding: 30px;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		border-radius: 12px;

		.playlist-cover {
			width: 200px;
			height: 200px;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
			flex-shrink: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.playlist-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.playlist-type {
				font-size: 12px;
				color: #667eea;
				font-weight: 500;
				margin-bottom: 8px;
			}

			.playlist-title {
				font-size: 28px;
				font-weight: 600;
				color: #333;
				margin: 0 0 16px 0;
			}

			.creator-info {
				display: flex;
				align-items: center;
				gap: 10px;
				margin-bottom: 20px;

				.creator-avatar {
					width: 30px;
					height: 30px;
					border-radius: 50%;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				}

				.creator-name {
					font-size: 14px;
					color: #333;
					font-weight: 500;
				}

				.create-time {
					font-size: 12px;
					color: #999;
				}
			}

			.playlist-actions {
				display: flex;
				gap: 12px;
				margin-bottom: 16px;
			}

			.playlist-tags {
				display: flex;
				gap: 8px;
				margin-bottom: 12px;
			}

			.playlist-desc {
				font-size: 13px;
				color: #666;
				line-height: 1.6;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

	.playlist-songs {
		.songs-header {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 20px;

			h2 {
				font-size: 20px;
				font-weight: 600;
				color: #333;
				margin: 0;
			}

			.song-count {
				font-size: 14px;
				color: #999;
			}
		}

		.song-title-cell {
			display: flex;
			align-items: center;
			gap: 12px;

			.song-cover-mini {
				width: 40px;
				height: 40px;
				border-radius: 4px;
				object-fit: cover;
			}

			.song-title-info {
				display: flex;
				align-items: center;
				gap: 8px;

				.song-title-name {
					font-size: 14px;
					color: #333;
				}
			}
		}

		.song-operations {
			display: flex;
			gap: 12px;

			.op-icon {
				cursor: pointer;
				font-size: 18px;
				color: #666;
				transition: all 0.3s;

				&:hover {
					color: #667eea;
					transform: scale(1.1);
				}
			}
		}

		:deep(.el-table) {
			.el-table__header {
				th {
					background: #f5f5f5;
					color: #666;
					font-weight: 500;
				}
			}

			.el-table__row {
				cursor: pointer;

				&:hover {
					background: #fafafa;
				}
			}
		}
	}
}
</style>
